<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title></title>
<!--	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
	<link rel="stylesheet" href="./css/styles.css">
	<link rel="stylesheet" href="./css/pdfannotate.css">

</head>
<script>
    // 获取 URL 中的 file 参数值
    const urlParams = new URLSearchParams(window.location.search);
    const file = urlParams.get('file');
    window.fileValue=file+'?t='+new Date().getTime();

    var that = this;
    window.addEventListener("message", function (event) {
        var data = event.data;
        console.log(data,'data')
        if(data.params == 'save'){
            that.savePDFCopy();
        }else{
            window.sampleOutput = data.params;
        }
    }, '*');

</script>
<body>
<div class="toolbar">
	<div class="tool">
		<span>&nbsp;</span>
	</div>
	<div class="tool">
		<button class="tool-button" onclick="showLeftLabel()"><i class="fa fa-server" title="显示左侧缩略图"></i></button>
	</div>
	<div class="tool">
		<label for="">当前页</label>
		<input  class="form-control text-right" value="1" id="currentPage" max="50" style="padding: 0 15px;" readonly>/<span id="allPage"></span>
	</div>
	<div class="tool">
		<button class="btn btn-info btn-sm" onclick="lastPage()">上一页</button>
	</div>
	<div class="tool">
		<button class="btn btn-info btn-sm" onclick="nextPage()">下一页</button>
	</div>
	<div class="tool">
		<button class="tool-button" onclick="undo()"><i class="fa fa-mail-reply" title="撤销" ></i></button>
	</div>
	<div class="tool">
		<button class="tool-button" onclick="redo()"><i class="fa fa-mail-forward" title="恢复" ></i></button>
	</div>
	<div class="tool">
		<label for="">线条粗细</label>
		<input type="number" class="form-control text-right" value="1" id="brush-size" max="50">
	</div>
	<div class="tool">
		<label for="">字体大小</label>
		<select id="font-size" class="form-control">
			<option value="10">10</option>
			<option value="12">12</option>
			<option value="16" selected>16</option>
			<option value="18">18</option>
			<option value="24">24</option>
			<option value="32">32</option>
			<option value="48">48</option>
			<option value="64">64</option>
			<option value="72">72</option>
			<option value="108">108</option>
		</select>
	</div>
<!--	<div class="tool">-->
<!--		<button class="tool-button active" onclick="enableSelector(event)"><i class="fa fa-hand-paper-o" title="Free Hand" ></i></button>-->
<!--	</div>-->
	<div class="tool">
		<button class="btn btn-danger btn-sm" onclick="enableAddText(event)">创建签字位置</button>
	</div>
	<div class="tool">
		<button class="btn btn-danger btn-sm" onclick="deleteSelectedObject(event)"><i class="fa fa-trash"></i></button>
	</div>

<!--	<div class="tool">-->
<!--		<button class="btn btn-danger btn-sm" onclick="clearPage()">清除页面</button>-->
<!--	</div>-->
	<div class="tool">
		<button class="btn btn-light btn-sm" onclick="savePDF()"><i class="fa fa-save"></i>下载</button>
	</div>
</div>

<div id="leftPanel" class="ui-layout-west thumbs ui-layout-pane ui-layout-pane-west" style="position: fixed; margin: 0px;  height: 860px; z-index: 99; width: 208px; display: none; visibility: visible;">
	<div id="tabPanel">
		<i class="fa fa-long-arrow-left" title="收起左侧缩略图" onclick="showLeftLabel()" style=" font-size: 23px;cursor: pointer;"></i>
	</div>
	<div id="thumbPane" class="tabPanel" style="display: block;">
	</div>
	<div id="bookmarkPane" class="tabPanel" style="display: none;">
		<ul id="bookmarkTree">
		</ul>
	</div>
</div>

<div id="pdf-container"></div>

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="dataModalLabel">PDF annotation data</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<pre class="prettyprint lang-json linenums">
				</pre>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<!--<script src="/pdf/build/pdf.js"></script>-->
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';</script>
<!--<script>pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf/build/pdf.worker.js';</script>-->
<script src="./js/fabric_4.3.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.2.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="./js/sample_output.js"></script>
<script src="./js/pdfannotate.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
